<template>
  <div class="menus">
    <el-button @click="goAdd" class="btn" type="primary">添加</el-button>
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="id" label="菜单编号" sortable width="180">
      </el-table-column>
      <el-table-column prop="title" label="菜单名称" sortable width="180">
      </el-table-column>
      <el-table-column prop="icon" width="180" label="菜单图标">
      </el-table-column>
      <el-table-column prop="url" label="菜单地址" sortable width="180">
      </el-table-column>
      <el-table-column width="180" label="状态">
        <template #default="{ row: { status } }">
          <el-tag type="success" v-show="status === 1">正常</el-tag>
          <el-tag type="danger" v-show="status === 2">禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row: { id } }">
          <el-button
            type="primary"
            size="mini"
            @click="$router.push({ path: '/setMenus', query: { id } })"
            >编辑</el-button
          >
          <el-button @click="del(id)" type="danger" size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { getListApi } from "@/api/admin";
import { delMenuApi } from "@/api/menu";
export default {
  components: {},
  data() {
    return {
      tableData: [],
      config: {
        mode: 1,
        flag: false,
      },
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      let res = await getListApi(true);
      this.tableData = res.list;
      console.log(res);
    },
    goAdd() {
      this.$router.push("/addMenus");
    },
    async del(id) {
      let res = await delMenuApi(id);
      if (res.code == 200) {
        alert(res.msg);
        this.getList()
        this.$Bus.$emit('updata')
      } else {
        alert(res.msg);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.menus {
  .btn {
    margin-bottom: 20px;
  }
}
/* .menus /deep/ .el-main[data-v-31386338] {
    text-align: left;
    line-height: normal;
} */
</style>
